<template>
  <div style="height: 100%;width: 100%">
    <svg-icon @dblclick="enter(value)"  icon-class="box" style="width: 100%;height: 100%" className="icon"></svg-icon>
    <input @click="inputFocus" style="width: 90%;height: 20px;font-size: 16px" @input="change" class="drag-cancel" v-model="compTitle">
  </div>

</template>

<script>

import * as CONFIG from "@/constant/config";

export default {
  data(){
    return {
      compTitle:this.title
    }
  },
  props:{
    value:String,
    title:String
  },
  watch:{
    title(title){
      this.compTitle=title
    }
  },
  computed: {
    uid(){
      return this.$route.params.uid  //获取当前用户的id
    }
  },
  methods:{
      enter(value){
        this.$router.push( '/admin/'+this.uid+'/'+value)
      },
      change(){
        this.$emit('changeTitle',this.compTitle);
      },
      inputFocus(){
        this.$emit('inputFocus');
      }
  }
}
</script>

<style scoped>
.box{
  width:100%;
  height:100%;
  opacity: 0.9;
  background-color: #cbced2;
}
input {
  border: 0;
  outline: none;
  background-color: rgba(0, 0, 0, 0);
}
</style>